<template>
	<view class="profile-container">
		<!-- 顶部用户信息卡片 -->
		<view class="user-card" @tap="handleEditProfile">
			<image class="user-avatar" :src="userInfo.avatar || '/static/avatars/default-avatar.jpg'"
				mode="aspectFill" />
			<view class="user-info">
				<text class="nickname">{{userInfo.nickName || '未设置昵称'}}</text>
				<text class="user-id">ID: {{userInfo.userId || '--'}}</text>
			</view>
		</view>

		<!-- 功能列表 -->
		<view class="menu-list">
			<view class="menu-item" @tap="handleMenuClick('myActivities')">
				<text class="menu-title">我的活动</text>
				<text class="arrow">></text>
			</view>

			<view class="menu-item" @tap="handleMenuClick('myTeams')">
				<text class="menu-title">我的球队</text>
				<text class="arrow">></text>
			</view>

			<view class="menu-item" @tap="handleMenuClick('settings')">
				<text class="menu-title">设置</text>
				<text class="arrow">></text>
			</view>
		</view>

		<!-- 退出登录按钮 -->
		<view class="logout-btn" @tap="handleLogout">
			退出登录
		</view>
	</view>
</template>

<script>
	import storage from '@/utils/storage'

	export default {
		data() {
			return {
				userInfo: {}
			}
		},
		onShow() {
			// 获取localstorage的用户信息
			const storage_data = uni.getStorageSync('storage_data')
			if (storage_data) {
				this.userInfo = storage_data.vuex_user_info
			}
		},
		methods: {
			handleMenuClick(type) {
				switch (type) {
					case 'myActivities':
						uni.navigateTo({
							url: '/pages/activity/my'
						})
						break
					case 'myTeams':
						uni.navigateTo({
							url: '/pages/team/my'
						})
						break
					case 'settings':
						uni.navigateTo({
							url: '/pages/profile/settings'
						})
						break
				}
			},
			handleLogout() {
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							// 清除存储的用户信息
							storage.clean()
							// 重定向到登录页
							uni.reLaunch({
								url: '/pages/login/index'
							})
						}
					}
				})
			},
			handleEditProfile() {
				uni.navigateTo({
					url: '/pages/profile/edit'
				})
			}
		}
	}
</script>

<style>
	.profile-container {
		min-height: 100vh;
		background-color: #f5f5f5;
		padding: 20rpx;
	}

	.user-card {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 40rpx;
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
	}

	.user-avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
		margin-right: 30rpx;
	}

	.user-info {
		flex: 1;
	}

	.nickname {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 10rpx;
		display: block;
	}

	.user-id {
		font-size: 26rpx;
		color: #999;
	}

	.menu-list {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 0 20rpx;
		margin-bottom: 30rpx;
	}

	.menu-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 20rpx;
		border-bottom: 1rpx solid #eee;
	}

	.menu-item:last-child {
		border-bottom: none;
	}

	.menu-title {
		font-size: 30rpx;
		color: #333;
	}

	.arrow {
		color: #999;
		font-size: 30rpx;
	}

	.logout-btn {
		background-color: #ff6b35;
		color: #fff;
		text-align: center;
		padding: 24rpx 0;
		border-radius: 12rpx;
		font-size: 32rpx;
		margin-top: 60rpx;
	}
</style>